<template>
  <div class="xxsp_all_box" oncontextmenu="return false;">
    <div class="xxsp_sp_box">
      <div class="video_box">
        <video
          ref="videoPlayer"
          :src="videourl"
          type="video/mp4"
          @timeupdate="onTimeUpdate"
          @ended="handleVideoEnd"
        >
          您的浏览器不支持 video 标签。
        </video>
        <div class="kj_allbox">
          <div class="kj_box">
            <div class="progress_bar">
              <div class="progress" :style="{ width: progress + '%' }">
                <div
                  class="progress-dot"
                  :style="{ left: progress + '%' }"
                ></div>
              </div>
            </div>
            <div class="kj_botom_box">
              <div style="display: flex; align-items: center">
                <div class="play_box">
                  <i
                    v-if="isPlaying"
                    class="el-icon-video-pause"
                    @click="togglePlay"
                  ></i>
                  <i v-else class="el-icon-video-play" @click="togglePlay"></i>
                </div>

                <div class="time-display">
                  <span class="current-time">{{ currentTime }}</span> /
                  <span class="total-time">{{ totalTime }}</span>
                </div>
              </div>

              <div class="fullscreen_button" @click="fullscreen()">
                <i class="el-icon-full-screen"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list_box">
        <div class="list_box_title">课程目录({{ count.length }})</div>
        <div class="list_box_nr" style="overflow: auto">
          <ul class="list">
            <li
              v-for="(item, i) in count"
              :key="i"
              class="list-item"
              :class="{ activebf: activebf === i }"
              @click="tabbf(i, item)"
            >
              <div>
                <div class="list-item_title">
                  <i class="el-icon-video-play"></i>
                  <span>{{ item.name }}</span>
                </div>
                <div class="xueshi">课时：{{ list.class_time }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="xxsp_box_title">{{ list.name }}</div>
    <div class="xxsp_box_nr">
      <span>学分：{{ list.class_hour }}分 </span>
      <span class="skls"> 授课老师：{{ list.teacher_name }}</span>
    </div>
    <div class="kcjs_box">
      <p>课程介绍：</p>
      <div class="kcjs">
        {{ list.introduction }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      count: [],
      activebf: 0,
      list: {},

      videourl: "",

      isPlaying: false, //播放控件
      currentTime: 0, //准确时间
      progress: 0, //进度条，进度
      schedule: 0, //回显进度
      totalTime: "", //总时间
      currentTime: "00:00", //当前时间

      isWindowFocused: true, //置顶
      isWindowMinimized: false, //最小化
      isMouseIdle: false, //鼠标长移动
      idleTimeout: null,
    };
  },
  mounted() {
    this.getinfo();
    this.init();
  },
  beforeDestroy() {
    // 移除事件监听器(视频)
    this.$refs.videoPlayer.removeEventListener(
      "loadedmetadata",
      this.loadedmetadata
    );
    this.$refs.videoPlayer.removeEventListener("timeupdate", this.timeupdate);
    this.$refs.videoPlayer.removeEventListener("pause", this.pauseCallback);
    this.$refs.videoPlayer.removeEventListener("ended", this.handleVideoEnd);
  },
  beforeUnmount() {
    // 移除事件监听器
    window.removeEventListener("focus", this.handleWindowFocus);
    window.removeEventListener("blur", this.handleWindowBlur);
    window.removeEventListener("resize", this.handleWindowResize);
    document.removeEventListener("mousemove", this.handleMouseMove);

    // 清除定时器
    clearTimeout(this.idleTimeout);
  },
  methods: {
    init() {
      this.$refs.videoPlayer.controls = false;

      this.$refs.videoPlayer.addEventListener("ended", this.handleVideoEnd);
      //时间控件
      this.$refs.videoPlayer.addEventListener(
        "loadedmetadata",
        this.loadedmetadata
      );
      this.$refs.videoPlayer.addEventListener("timeupdate", this.timeupdate);

      //暂停回调
      this.$refs.videoPlayer.addEventListener("pause", this.pauseCallback);

      // 监听窗口焦点状态
      window.addEventListener("focus", this.handleWindowFocus);
      window.addEventListener("blur", this.handleWindowBlur);

      // 监听窗口大小变化
      window.addEventListener("resize", this.handleWindowResize);

      // 监听鼠标移动
      document.addEventListener("mousemove", this.handleMouseMove);
    },
    //播放/暂停
    togglePlay() {
      this.isPlaying = !this.isPlaying;
      if (this.isPlaying) {
        this.$refs.videoPlayer.play();
        return;
      }
      this.$refs.videoPlayer.pause();
    },
    //暂停回调
    pauseCallback() {
      // 执行暂停时的操作
      // console.log("视频已暂停", this.progress);
      //调用接口
      let that = this;
      let data = {
        cid: that.list.cid,
        id: that.list.id,
        schedule: this.progress,
      };
      that.$http.post("education/item_save", data).then((res) => {});
    },
    //转化时间
    formatTime(value) {
      let time = JSON.parse(JSON.stringify(value));
      let minutes = Math.floor(time / 60);
      let seconds = Math.floor(time % 60);
      return (
        minutes.toString().padStart(2, "0") +
        ":" +
        seconds.toString().padStart(2, "0")
      );
    },

    //总时间
    loadedmetadata() {
      const videoPlayer = this.$refs.videoPlayer;
      this.totalTime = this.formatTime(videoPlayer.duration);

      this.$refs.videoPlayer.currentTime =
        (this.schedule * videoPlayer.duration) / 100;
    },
    //当前时间
    timeupdate() {
      const videoPlayer = this.$refs.videoPlayer;
      // console.log(videoPlayer.currentTime)
      //进度条
      this.progress = Math.floor(
        (videoPlayer.currentTime / videoPlayer.duration) * 100
      );
      this.currentTime = this.formatTime(videoPlayer.currentTime);
    },
    // 全屏
    fullscreen() {
      const videoContainer = this.$refs.videoPlayer;
      if (videoContainer.requestFullscreen) {
        videoContainer.requestFullscreen();
      } else if (videoContainer.mozRequestFullScreen) {
        videoContainer.mozRequestFullScreen();
      } else if (videoContainer.webkitRequestFullscreen) {
        videoContainer.webkitRequestFullscreen();
      } else if (videoContainer.msRequestFullscreen) {
        videoContainer.msRequestFullscreen();
      }
    },
    // 执行其他根据播放进度更新的逻辑
    onTimeUpdate(event) {
      // const videoPlayer = event.target;
      // this.currentTime = videoPlayer.currentTime;
    },
    //播放结束
    handleVideoEnd() {
      // 视频播放结束时的处理逻辑
      if (this.isPlaying) {
        this.isPlaying = false;
        this.$refs.videoPlayer.pause();
      }
      this.pauseCallback();
    },
    /**
     * 获取列表
     */
    getinfo() {
      let that = this;
      let data = {
        id: that.id,
      };
      that.$http.post("education/class_item_list", data).then((res) => {
        if (res.code === 1) {
          that.count = res.data;
          that.list = that.count[0];
          that.videourl = this.$self.imgurl(that.list.video_url);
          this.getschedule(that.list.id, that.list.cid);
        } else {
          that.count = [];
        }
      });
    },
    /**
     * 单独获取进度，用于切换断点播放
     * @param {视频id} id
     * @param {课程cid} cid
     */
    getschedule(id, cid) {
      let that = this;
      let data = {
        id: id,
        cid: cid,
      };
      that.$http.post("education/obtain", data).then((res) => {
        this.schedule = res.data.schedule;
        this.loadedmetadata();
      });
    },
    /**
     *
     * @param {下标} index
     * @param {视频信息} item
     */
    tabbf(index, item) {
      // console.log(index,item)
      this.activebf = index;
      this.pauseCallback();
      this.list = this.count[index];

      this.getschedule(item.id, item.cid);

      if (this.isPlaying) {
        this.isPlaying = false;
        this.$refs.videoPlayer.pause();
      }
      this.videourl = this.$self.imgurl(this.list.video_url);
    },
    //置顶操作
    handleWindowFocus() {
      this.isWindowFocused = true;
    },
    //置顶操作
    handleWindowBlur() {
      this.isWindowFocused = false;
      if (this.isPlaying) {
        this.isPlaying = false;
        this.$refs.videoPlayer.pause();
      }
    },
    //最小化
    handleWindowResize() {
      if (window.innerWidth === 0 && window.innerHeight === 0) {
        this.isWindowMinimized = true;
        if (this.isPlaying) {
          this.isPlaying = false;
          this.$refs.videoPlayer.pause();
        }
      } else {
        this.isWindowMinimized = false;
      }
    },
    //鼠标移动
    handleMouseMove() {
      clearTimeout(this.idleTimeout);
      this.isMouseIdle = false;
      this.idleTimeout = setTimeout(() => {
        this.isMouseIdle = true;
        if (this.isPlaying) {
          this.isPlaying = false;
          this.$refs.videoPlayer.pause();
        }
      }, 10000); // 设置3秒钟未移动即判定为长时间未移动
    },
    //=============
  },
};
</script>
<style>
/* 隐藏video 所有控件 */
video::-webkit-media-controls {
  display: none !important;
}
</style>
<style scoped>
.xxsp_all_box {
  margin-left: 0.625rem;
}

.xxsp_sp_box {
  display: flex;
  justify-content: space-between;
  height: 6.5rem;
}

.video_box {
  width: 10.6rem;
  border: #cecece solid 1px;
  position: relative;
}

.video_box video {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #696868;
}

.kj_allbox {
  position: absolute;
  top: 90%;
  left: 0%;
  width: 100%;
  height: 10%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.kj_box {
  height: 100%;
}

.play_box {
  font-size: 0.3625rem;
  color: #ffffff;
  cursor: pointer;
  height: 93%;
  display: flex;
  align-items: center;
  margin-left: 0.375rem;
}

.progress_bar {
  height: 10%;
  background: #999999;
  width: 100%;
}

.progress {
  height: 100%;
  background: #2080f7 !important;
}

.progress-dot {
  position: absolute;
  top: -0.0375rem;
  left: 0.0375rem;
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background-color: #fff;
  transform: translateX(-50%);
}

.kj_botom_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.time-display {
  font-size: 0.175rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.275rem;
  margin-left: 0.275rem;
}

.fullscreen_button {
  font-size: 0.31rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
}

.list_box {
  width: 4rem;
  background: #000000;
}

.list_box_title {
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  border-bottom: 1px solid #667280;
  padding: 0.2125rem 0.25rem;
}

.list_box_nr {
  height: 5.65rem;
  /* background: pink; */
  margin: 0.08rem auto;
}

.xxsp_box_title {
  font-size: 0.3rem;
  font-weight: 400;
  color: #333333;
  margin: 0.2375rem auto;
}

.xxsp_box_nr {
  font-size: 0.175rem;
  font-weight: 400;
  color: #7c7c7c;
}

.skls {
  margin-left: 0.625rem;
}

.kcjs_box {
  margin-top: 0.575rem;
  padding-top: 0.2375rem;
  font-size: 0.3rem;
  font-weight: 400;
  color: #333333;
  border-top: 1px solid #cecece;
}

.kcjs {
  margin-top: 0.4rem;
  font-size: 0.225rem;
}

.list-item {
  display: flex;
  align-items: center;
  margin: 0.025rem 0 0 0;
  height: 0.625rem;
  padding: 0 0.275rem;
  font-size: 0.175rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a1a9b2;
  cursor: pointer;
  border-bottom: 1px dotted #333333;
}

.list-item:hover {
  color: #2080f7;
}

.list-item_title {
  display: flex;
  align-items: flex-end;
}

.list-item i {
  margin-right: 0.0625rem;
}

.xueshi {
  margin: 0.05rem 0 0 0.2725rem;
}

.activebf {
  color: #2080f7;
}

/* 样式滚动条 */
::-webkit-scrollbar {
  width: 0.1rem;
  /* 设置滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #000000;
  /* 设置滚动条轨道的背景颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #586470;
  /* 设置滚动条滑块的背景颜色 */
  height: 0.0625rem;
}

/* 滚动条滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #000000;
  /* 设置滚动条滑块的悬停背景颜色 */
}

/* 滚动条按钮 */
::-webkit-scrollbar-button {
  display: none;
  /* 隐藏滚动条按钮（上下箭头） */
}
</style>